<script lang="ts" setup>
import { ref } from "vue";

const dataList = ref<any>([
    {
        name: "天天五折",
        sort: '50'
    },
    {
        name: "门店VIP服务",
        sort: '50'
    },
]);

const modalVisible = ref(false);

const handleAction = (action: string) => {
    if (action === 'add') {
        modalVisible.value = true;
    }
};
</script>

<template>
    <umrp-container bg-color="#f2f2f2" height="100%" padding="16px" :gap="16">
        <umrp-breadcrumb :items="['会员管理', '会员权益']"></umrp-breadcrumb>
        <umrp-row :gutter="16" style="flex:1">
            <umrp-col :span="4" style="height:100%">
                <umrp-card :border="false" style="height:100%">
                    <umrp-menu>
                        <umrp-menu-item key="1">小蓝A卡</umrp-menu-item>
                        <umrp-menu-item key="2">小蓝B卡</umrp-menu-item>
                    </umrp-menu>
                </umrp-card>
            </umrp-col>
            <umrp-col :span="20">
                <umrp-card :border="false">
                    <umrp-table :data="dataList" :action-bar="true" @action="handleAction" :pagination="false">
                        <template #columns>
                            <umrp-table-column title="序号" data-index="id"></umrp-table-column>
                            <umrp-table-column title="权益封面" slot-name="cover"></umrp-table-column>
                            <umrp-table-column title="权益描述" data-index="name"></umrp-table-column>
                            <umrp-table-column title="排序" data-index="sort"></umrp-table-column>
                            <umrp-table-column title="操作" slot-name="action" :width="120"></umrp-table-column>
                        </template>
                        <template #cover>
                            <umrp-image :height="80" :width="160"></umrp-image>
                        </template>
                        <template #action>
                            <umrp-space :size="10">
                                <umrp-button type="primary" @click="modalVisible = true">编辑</umrp-button>
                                <umrp-popconfirm message="您确认删除么？">
                                    <umrp-button type="danger">移除</umrp-button>
                                </umrp-popconfirm>
                            </umrp-space>
                        </template>
                    </umrp-table>
                </umrp-card>
            </umrp-col>
        </umrp-row>
    </umrp-container>
    <umrp-modal v-model:visible="modalVisible" :width="500">
        <umrp-container padding="16px 0">
            <umrp-form>
                <umrp-form-item label="权益封面">
                    <umrp-upload></umrp-upload>
                </umrp-form-item>
                <umrp-form-item label="权益描述">
                    <umrp-textarea></umrp-textarea>
                </umrp-form-item>
            </umrp-form>
        </umrp-container>
    </umrp-modal>
</template>